<template>
	<view>
		<!-- 邀请好友 -->
		<!-- <cus-navbar navbar :title="$t('index42')"></cus-navbar> -->
		
		<view class="share">
			<view class="share-box flex-center flex-direction">
				<view class="share-card flex-center">
					<canvas canvas-id="qrcode" class="share-code" />
				</view>
				<!-- 扫码加入天赐财富AFN -->
				<view class="size-24 mt-20 mb-38">{{$t('index43')}}</view>
				<view class="word-warp text-center size-26 text-bold">{{info.address_hide}}</view>
				<!-- 复制链接 -->
				<view class="share-btn" @click="copyAddress">{{$t('index44')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/utils/uqrcode.js';
	export default {
		data() {
			return {
				QRCodeText:'',
				QRCodeFilePath:'',
				info:{}
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			loadData(){
				this.$api.post('/data/api.auth.center/get').then(res=>{
					this.info = res.user
					console.log(this.info)
					// #ifdef H5
					this.QRCodeText = window.location.protocol+'//'+window.location.host+'/#/pages/index?ref='+ res.user.inviter_code
					// #endif
					uni.showLoading()
					setTimeout(()=>{
						uQRCode.make({
							canvasId: 'qrcode',
							text: this.QRCodeText,
							size: 150,
							success: res => {
								this.QRCodeFilePath = res;
								uni.hideLoading()
							}
						});
					},500)
				})
			},
			copyAddress(){
				uni.setClipboardData({
					data: this.QRCodeText
				})
			}
		}
	}
</script>

<style lang="scss">
	.share{
		width: 750rpx;
		background-image: url('../../static/imgs/14.png');
		background-size: cover;
		padding: 875rpx 30rpx 103rpx 30rpx;
		.share-box{
			padding: 40rpx 30rpx 72rpx 30rpx;
			border: 4rpx solid #43EA80;
			border-radius: 20rpx;
			position: relative;
			.share-card{
				width: 160px;
				height: 160px;
				background-color: #FFFFFF;
				.share-code{
					width: 150px;
					height: 150px;
				}
			}
			.share-btn{
				width: 530rpx;
				height: 68rpx;
				border-radius: 34rpx;
				position: absolute;
				bottom: -32rpx;
				font-size: 24rpx;
				background-color: #43EA80;
				color: #0B0C15;
				text-align: center;
				line-height: 68rpx;
				&:active{
					transform: translate(1rpx, 1rpx);
				}
			}
		}
	}
</style>